<template>
  <div class="detail">
    <detail-nav-bar />
    <scroll class="content">
      <detail-swiper :detailBanners="detailBanners" />
      <detail-base-info :detailBaseInfo="baseInfo" />
      <shop-info :shopInfo="shopInfo" />
      <detail-goods-info :detailGoodsInfo="goodsInfo" />
      <detail-params-info :paramsInfo ="paramsInfo"/>
      <detail-comment-info :commentInfo="commentInfo"/>
      <detail-recommend :recommendList="recommendList"></detail-recommend>
    </scroll>
  </div>
</template>

<script>
import { getDetailInfo,getRecommend, GoodsInfo,Shop, GoodsParams, Comment } from "../../network/detail";
import DetailBaseInfo from "./childrenComponents/DetailBaseInfo.vue";
import DetailNavBar from "./childrenComponents/DetailNavBar.vue";
import DetailSwiper from "./childrenComponents/DetailSwiper";
import ShopInfo from "./childrenComponents/ShopInfo.vue";

import Scroll from "../../components/common/scroll/Scroll.vue";
import DetailGoodsInfo from './childrenComponents/DetailGoodsInfo.vue';
import DetailParamsInfo from './childrenComponents/DetailParamsInfo.vue';
import DetailCommentInfo from './childrenComponents/DetailCommentInfo.vue';
import DetailRecommend from './childrenComponents/DetailRecommend.vue';
export default {
  name: "detail",
  data() {
    return {
      id: "",
      detailBanners: [],
      baseInfo: {},
      shopInfo: {},
      goodsInfo:{},
      paramsInfo:{},
      commentInfo:{},
      recommendList:[]
    };
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    ShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamsInfo,
    DetailCommentInfo,
    DetailRecommend,
  },
  created() {
    this.id = this.$route.params.id;
    this.getInfo(this.id);
    this._getRecommend();
  },
  methods: {
    getInfo(id) {
      getDetailInfo(id).then((res) => {
        console.log(res);
        const data = res.result;
        //1. 获取轮播图数据
        this.detailBanners = data.itemInfo.topImages;

        //获取baseInfo数据
        this.baseInfo = new GoodsInfo(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
        //获取shopInfo数据
        this.shopInfo = new Shop(data.shopInfo);

        this.goodsInfo = data.detailInfo;

        //商品参数
        this.paramsInfo = new GoodsParams(data.itemParams.info, data.itemParams.rule);

        //用户评价
        if (data.rate.list) {
          this.commentInfo = new Comment(data.rate.list[0]);
        }
      });
    },
     _getRecommend() {
        getRecommend().then((res, error) => {
          if (error) return
          this.recommendList = res.data.list
        })
      }
  },
};
</script>
<style scoped>
.detail {
  height: 100vh;
  position: relative;
  z-index: 99;
  background: white;
}
.content {
  height: calc(100% - 44px);
  background: white;
}
</style>